<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script type="text/javascript" src="../internal.js"></script>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1&services=true"></script>
        <style type="text/css">
            .content {
                width: 530px;
                height: 350px;
                margin: 10px auto;
            }
            .content table {
                width: 100%;
            }
            .content table td {
                vertical-align: middle;
            }
            #city,
            #address {
                height: 21px;
                background: #fff;
                border: 1px solid #d7d7d7;
                line-height: 21px;
            }
            #city {
                width: 60px;
            }
            #address {
                width: 130px;
            }
            #is_dynamic_label span {
                vertical-align: middle;
                margin: 3px 0px 3px 3px;
            }
            #is_dynamic_label input {
                vertical-align: middle;
                margin: 3px 3px 3px 50px;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <table>
                <tr>
                    <td><var id="lang_city"></var>:</td>
                    <td><input id="city" type="text" /></td>
                    <td><var id="lang_address"></var>:</td>
                    <td><input id="address" type="text" value="" /></td>
                    <td>
                        <a href="javascript:doSearch()" class="button"><var id="lang_search"></var></a>
                    </td>
                    <td>
                        <label id="is_dynamic_label" for="is_dynamic"
                            ><input id="is_dynamic" type="checkbox" name="is_dynamic" /><span
                                ><var id="lang_dynamicmap"></var></span
                        ></label>
                    </td>
                </tr>
            </table>
            <div style="width: 100%; height: 340px; margin: 5px auto; border: 1px solid gray" id="container"></div>
        </div>
        <script type="text/javascript">
            var map = new BMap.Map('container'),
                marker,
                point,
                styleStr;
            map.enableScrollWheelZoom();
            map.enableContinuousZoom();
            function doSearch() {
                if (!document.getElementById('city').value) {
                    alert(lang.cityMsg);
                    return;
                }
                var search = new BMap.LocalSearch(document.getElementById('city').value, {
                    onSearchComplete: function (results) {
                        if (results && results.getNumPois()) {
                            var points = [];
                            for (var i = 0; i < results.getCurrentNumPois(); i++) {
                                points.push(results.getPoi(i).point);
                            }
                            if (points.length > 1) {
                                map.setViewport(points);
                            } else {
                                map.centerAndZoom(points[0], 13);
                            }
                            point = map.getCenter();
                            marker.setPoint(point);
                        } else {
                            alert(lang.errorMsg);
                        }
                    },
                });
                search.search(document.getElementById('address').value || document.getElementById('city').value);
            }
            //获得参数
            function getPars(str, par) {
                var reg = new RegExp(par + '=((\\d+|[.,])*)', 'g');
                return reg.exec(str)[1];
            }
            function init() {
                var mapNode = editor.selection.getRange().getClosedNode(),
                    isMapImg = mapNode && /api[.]map[.]baidu[.]com/gi.test(mapNode.getAttribute('src')),
                    isMapIframe = mapNode && domUtils.hasClass(mapNode, 'ueditor_baidumap');
                if (isMapImg || isMapIframe) {
                    var url, centerPos, markerPos;
                    if (isMapIframe) {
                        url = decodeURIComponent(mapNode.getAttribute('src'));
                        $G('is_dynamic').checked = true;
                        styleStr = mapNode.style.cssText;
                    } else {
                        url = mapNode.getAttribute('src');
                        styleStr = mapNode.style.cssText;
                    }

                    centerPos = getPars(url, 'center').split(',');
                    markerPos = getPars(url, 'markers').split(',');
                    point = new BMap.Point(Number(centerPos[0]), Number(centerPos[1]));
                    marker = new BMap.Marker(new BMap.Point(Number(markerPos[0]), Number(markerPos[1])));
                    map.addControl(new BMap.NavigationControl());
                    map.centerAndZoom(point, Number(getPars(url, 'zoom')));
                } else {
                    point = new BMap.Point(116.404, 39.915); // 创建点坐标
                    marker = new BMap.Marker(point);
                    map.addControl(new BMap.NavigationControl());
                    map.centerAndZoom(point, 10); // 初始化地图,设置中心点坐标和地图级别。
                }
                marker.enableDragging();
                map.addOverlay(marker);
            }
            init();
            document.getElementById('address').onkeydown = function (evt) {
                evt = evt || event;
                if (evt.keyCode == 13) {
                    doSearch();
                }
            };
            dialog.onok = function () {
                var center = map.getCenter();
                var zoom = map.zoomLevel;
                var size = map.getSize();
                var mapWidth = size.width;
                var mapHeight = size.height;
                var point = marker.getPoint();

                if ($G('is_dynamic').checked) {
                    var URL = editor.options.UEDITOR_HOME_URL,
                        url = [
                            URL +
                                (/\/$/.test(URL) ? '' : '/') +
                                'dialogs/map/show.html' +
                                '#center=' +
                                center.lng +
                                ',' +
                                center.lat,
                            '&zoom=' + zoom,
                            '&width=' + mapWidth,
                            '&height=' + mapHeight,
                            '&markers=' + point.lng + ',' + point.lat,
                            '&markerStyles=' + 'l,A',
                        ].join('');
                    editor.execCommand(
                        'inserthtml',
                        '<iframe class="ueditor_baidumap" src="' +
                            url +
                            '"' +
                            (styleStr ? ' style="' + styleStr + '"' : '') +
                            ' frameborder="0" width="' +
                            (mapWidth + 4) +
                            '" height="' +
                            (mapHeight + 4) +
                            '"></iframe>',
                    );
                } else {
                    var url =
                        'http://api.map.baidu.com/staticimage?center=' +
                        center.lng +
                        ',' +
                        center.lat +
                        '&zoom=' +
                        zoom +
                        '&width=' +
                        size.width +
                        '&height=' +
                        size.height +
                        '&markers=' +
                        point.lng +
                        ',' +
                        point.lat;
                    editor.execCommand(
                        'inserthtml',
                        '<img width="' +
                            size.width +
                            '"height="' +
                            size.height +
                            '" src="' +
                            url +
                            '"' +
                            (styleStr ? ' style="' + styleStr + '"' : '') +
                            '/>',
                    );
                }
            };
            document.getElementById('address').focus();
        </script>
    </body>
</html>
